<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/style.css">
    <style>
    .sidebar { position: fixed; right: 20px; top: 20px; bottom: 22px; padding: 0 10px; width: 240px; }
    #sidebar { position: absolute; right: 0; top: 10px; }
    #tree { position: absolute; left: 10px; right: 10px; top: 110px; bottom: 10px; overflow: auto; }
    </style>
</head>
<body>
    <div class="sidebar layui-panel">
        <div class="layui-tab layui-tab-brief" lay-filter="tab">
            <ul class="layui-tab-title">
                <li class="layui-this">栏目列表</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <button id="allcolumn" type="button" class="layui-btn layui-btn-fluid">所有内容</button>
                    <div id="tree"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="wrapper" style="right: 300px;">
        <div class="panel layui-panel">
            <div class="layui-tab layui-tab-brief" lay-filter="tab">
                <ul class="layui-tab-title">
                    <li id="tabContent" lay-id="tabContent" class="layui-this">所有内容</li>
                    <li id="tabPage" lay-id="tabPage" style="display: none;"></li>
                    <a id="sidebar" class="layui-btn layui-btn-sm"><i class="layui-icon layui-icon-spread-left"></i> 栏目</a>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <form class="layui-form" lay-filter="formSearch">
                            <input type="text" name="column_id" id="column_id" value="0" style="display: none;">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <input type="text" name="title" id="title" class="layui-input" placeholder="标题">
                                </div>
                                <div class="layui-inline">
                                    <button class="layui-btn" lay-filter="search" lay-submit>搜索</button>
                                </div>
                            </div>
                        </form> 

                        <table class="layui-hide" id="table" lay-filter="table"></table>
                
                        <script type="text/html" id="TB">
                            <div class="layui-btn-group">
                                <a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-1"></i> 新增</a>
                                <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="dels"><i class="layui-icon layui-icon-delete"></i> 删除</a>
                            </div>
                            <div class="layui-btn-group">
                                <a class="layui-btn layui-btn-primary layui-btn-sm" lay-event="column_id">移动</a>
                                <a class="layui-btn layui-btn-primary layui-btn-sm" lay-event="top">置顶</a>
                                <a class="layui-btn layui-btn-primary layui-btn-sm" lay-event="recommend">推荐</a>
                                <a class="layui-btn layui-btn-primary layui-btn-sm" lay-event="publish">发布</a>
                            </div>
                        </script> 

                        <script type="text/html" id="Attr">
                            {{# if (d.top == 1) { }}
                            <span class="layui-badge layui-bg-cyan">顶</span>
                            {{# } }}
                            {{# if (d.recommend == 1) { }}
                            <span class="layui-badge layui-bg-cyan">荐</span>
                            {{# } }}
                            {{# if (d.pic != '') { }}
                            <span class="layui-badge layui-bg-cyan">图</span>
                            {{# } }}
                            {{# if (d.url != '') { }}
                            <span class="layui-badge layui-bg-cyan">跳</span>
                            {{# } }}
                        </script>

                        <script type="text/html" id="OPE">
                            <a lay-event="edit">编辑</a>
                            <!-- <span class="ope-delimiter">|</span>
                            <a lay-event="del">删除</a> -->
                        </script>
                    </div>
                    <div class="layui-tab-item">
                        <form class="layui-form" id="formPage" lay-filter="formPage">
                            <input type="text" name="id" id="id" value="" style="display: none;">

                            <div class="layui-form-item">
                                <script id="editor" type="text/plain" style="width: 100%;"></script>
                            </div>
                            
                            <div class="layui-form-item">
                                <button class="layui-btn" id="save" lay-filter="save" lay-submit>保存</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="columnMove" class="layui-form" style="display: none; padding: 20px;">
        <select id="column_id_move">
            <option value="">选择栏目</option>
            {foreach $column as $v}
            <option value="{$v.id}"{$v.children||$v.type>0?' disabled':''}{:isset($content.column_id)&&$content.column_id==$v.id?' selected':''}>
                {:str_repeat('&nbsp;&nbsp;&nbsp;&nbsp;', $v.level)}{$v.name}
            </option>
            {/foreach}
        </select>
    </div>
</body>
</html>
<script src="/static/layui/layui.js"></script>
<script src="/static/ueditorplus/ueditor.config.js"></script>
<script src="/static/ueditorplus/ueditor.all.js"></script>
<script>
layui.use(function() {
    var $ = layui.jquery
        element = layui.element,
        form = layui.form,
        table = layui.table,
        tree = layui.tree;

    element.on('tab(tab)', function(obj) {
        $('#tabContent').css('display', obj.index ? 'none' : 'inline-block');
        $('#tabPage').css('display', obj.index ? 'inline-block' : 'none');
    });

    form.on('submit(search)', function(obj) {
        table.reloadData('table', { where: obj.field, page: { curr: 1 } });
        return false;
    });

    table.render({
        id: 'table',
        elem: '#table',
        url: "{:url('admin/content/content')}",
        method: 'post',
        toolbar: '#TB',
        defaultToolbar: ['filter', 'exports', 'print'],
        page: true,
        cols: [[
            {type:'checkbox', fixed: 'left'},
            // {field: 'id', width: 80, title: 'ID'},
            {field: 'sort', width: 60, title: '排序', edit: 'text', fixed: 'left', align: 'center'},
            {field: 'title', title: '标题', templet: function(d) { return '<a href="/content/' + d.id + '.html" target="_blank" class="layui-font-14">' + d.title + '</a>'; }},
            {field: 'column_name', title: '所属栏目', width: 100},
            {field: 'update_time', title: '更新时间', width: 160, sort: true},
            {title: '发布', width: 60, templet: function(d) { return d.publish > 0 ? '<span class="layui-badge layui-bg-green">是</span>' : '<span class="layui-badge">否</span>'; }},
            {title: '属性', width: 140, templet: '#Attr'},
            {title: '操作', width: 60, fixed: 'right', templet: '#OPE', align: 'center'}
        ]],
        height: 'full-193',
        skin: 'line',
        // done: function (res, curr, count, origin) {
        //     table.resize('table');
        // }
    });

    table.on('toolbar(table)', function(obj) {
        if (obj.event === 'add') {
            parent.layer.open({
                type: 2,
                title: '添加内容',
                area: ['100%', '100%'],
                content: "{:url('admin/content/contentform')}?column_id=" + $('#column_id').val()
            });
        } else if (obj.event === 'dels') {
            layer.confirm('确定要删除选中内容吗？', {icon: 3}, function (index) {
                var ids = '';
                table.checkStatus(obj.config.id).data.forEach(function(item) { ids += item.id + ','; });
                var loadIndex = layer.load();
                $.post("{:url('admin/content/contentdels')}", {'ids': ids}, function(res) {
                    layer.close(loadIndex);
                    if (res.code > 0) {
                        layer.alert(res.msg, {icon: 2});
                    } else {
                        layer.msg(res.msg, {time: 500});
                        table.reloadData('table');
                    }
                });
                layer.close(index);
            });
        } else if (obj.event === 'column_id') {
            layer.open({
                type: 1,
                title: '栏目选择',
                content: $('#columnMove'),
                area: ['600px', '500px'],
                btn: ['确定', '取消'],
                yes: function(index){
                    if ($('#column_id_move').val() != '') {
                        window.contentUpdate('column_id', $('#column_id_move').val());
                    }
                    layer.close(index)
                }
            });
        } else if (obj.event === 'top') {
            layer.msg('操作类型', {
                shade: 0.3,
                shadeClose: true,
                time: 0,
                btn: ['置顶', '取消置顶'],
                yes: function (index) {
                    window.contentUpdate('top', '1');
                    layer.close(index);
                },
                btn2: function (index) {
                    window.contentUpdate('top', '0');
                    return false;
                }
            });
        } else if (obj.event === 'recommend') {
            layer.msg('操作类型', {
                shade: 0.3,
                shadeClose: true,
                time: 0,
                btn: ['推荐', '取消推荐'],
                yes: function (index) {
                    window.contentUpdate('recommend', '1');
                    layer.close(index);
                },
                btn2: function (index) {
                    window.contentUpdate('recommend', '0');
                    return false;
                }
            });
        } else if (obj.event === 'publish') {
            layer.msg('操作类型', {
                shade: 0.3,
                shadeClose: true,
                time: 0,
                btn: ['发布', '取消发布'],
                yes: function (index) {
                    window.contentUpdate('publish', '1');
                    layer.close(index);
                },
                btn2: function (index) {
                    window.contentUpdate('publish', '0');
                    return false;
                }
            });
        }
    });

    table.on('edit(table)', function(obj) {
        var loadIndex = layer.load();
        $.post("{:url('admin/content/contentSort')}", {'id': obj.data.id, 'sort': obj.value}, function(res) {
            layer.close(loadIndex);
            if (res.code > 0) {
                layer.alert(res.msg, {icon: 2});
            } else {
                layer.msg(res.msg, {time: 500});
                table.reloadData('table');
            }
        });
    });

    table.on('tool(table)', function (obj) {
        if (obj.event === 'edit') {
            parent.layer.open({
                type: 2,
                title: '编辑内容',
                area: ['100%', '100%'],
                content: "{:url('admin/content/contentform')}?id=" + obj.data.id + '&column_id=' + $('#column_id').val()
            });
        }
    });    

    form.on('submit(save)', function(obj) {
        var postData = obj.field;
        var loadIndex = layer.load();
        $.post("{:url('admin/content/pagesave')}", postData, function(res) {
            layer.close(loadIndex);
            if (res.code > 0) {
                layer.alert(res.msg, {icon: 2});
            } else {
                layer.msg(res.msg, {time: 500});
            }
        });
        return false;
    });

    $('#sidebar').click(function() {
        var b = $('.sidebar').css('display') === 'block';
        $('.sidebar').css('display', b ? 'none' : 'block');
        $('.wrapper').css('right', b ? '20px' : '300px');
        $('i', this).attr('class',b ? 'layui-icon layui-icon-shrink-right' : 'layui-icon layui-icon-spread-left');
        table.resize('table');
    });

    $('#allcolumn').click(function() {
        $('#tree .layui-tree-txt').css('color', '#555');
        element.tabChange('tab', 'tabContent');
        $('#tabContent').html('所有内容');
        $('#column_id').val(0);
        table.reloadData('table', { where: { 'column_id': 0 }, page: { curr: 1 } });
    });

    $.getJSON("{:url('admin/content/columntree')}", function(json) {
        tree.render({
            elem: '#tree',
            data: json,
            onlyIconControl: true,
            click: function(obj) {
                if (obj.data.type < 2) {
                    $('#tree .layui-tree-txt').css('color', '#555');
                    $('.layui-tree-entry:first .layui-tree-txt', obj.elem).css('color', '#16b777');
                }

                if (obj.data.type == 0) {
                    element.tabChange('tab', 'tabContent');
                    $('#tabContent').html(obj.data.title);
                    $('#column_id').val(obj.data.id);
                    table.reloadData('table', { where: { 'column_id': obj.data.id }, page: { curr: 1 } });
                } else if (obj.data.type == 1) {
                    var loadIndex = layer.load();
                    $.post("{:url('admin/content/page')}", {'id': obj.data.id}, function(res) {
                        layer.close(loadIndex);
                        if (res.code > 0) {
                            layer.alert(res.msg, {icon: 2});
                        } else {
                            $('#id').val(obj.data.id);
                            UE.getEditor('editor').setContent(res.data);
                            $('#tabPage').html(obj.data.title);    
                            element.tabChange('tab', 'tabPage');
                        }
                    });
                } else if (obj.data.type == 2) {
                    window.open(obj.data.url);
                }
            }
        });
    });

    window.contentUpdate = function(key, value) {
        var ids = '';
        table.checkStatus('table').data.forEach(function(item) { ids += item.id + ','; });
        var loadIndex = layer.load();
        $.post("{:url('admin/content/contentUpdate')}", {'ids': ids, 'key': key, 'value': value}, function(res) {
            layer.close(loadIndex);
            if (res.code > 0) {
                layer.alert(res.msg, {icon: 2});
            } else {
                layer.msg(res.msg, {time: 500});
                table.reloadData('table');
            }
        });
    }

    UE.getEditor('editor', {
        serverUrl: "{:url('admin/editor/ueditorplus')}",
        imageConfig: { disableOnline: true },
        initialFrameHeight: $(window).height() - 343,
        catchRemoteImageEnable: false,
    });
});
</script>